<template>
    <div class="desc">
        <h2><i>&nbsp;</i>{{ name }}简介</h2>
        <p class="brief">{{ briefDesc }}</p>
        <h2>{{ title }}</h2>
        <p>{{ text }}</p>
        <h2>{{ title1 }}</h2>
        <p>{{ text1 }}</p>
        <h2>{{ title2 }}</h2>
        <p>{{ text2 }}</p>
    </div>
</template>

<script>
import { ArtistDetailApi, ArtistDescApi } from "@/request/api";
export default {
    data () {
        return {
            name: "",
            briefDesc: "",
            title: "",
            text: "",
            title1: "",
            text1: "",
            title2: "",
            text2: "",
        }
    },
    computed: {
        id() {
            return this.$route.params.id;
        }
    },
    created() {
        ArtistDetailApi(this.id).then((res) => {
            // console.log(res);
            this.name = res.data.data.artist.name;
        });
        ArtistDescApi(this.id).then((res) => {
            // console.log(res);
            this.briefDesc = res.data.briefDesc;
            this.title = res.data.introduction[0].ti;
            this.text = res.data.introduction[0].txt;
            this.title1 = res.data.introduction[1].ti;
            this.text1 = res.data.introduction[1].txt;
            this.title2 = res.data.introduction[2].ti;
            this.text2 = res.data.introduction[2].txt;
        })
    }
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.desc {
    float: left;
    h2 {
        margin: 30px 0 8px 0;
        color: #333;
        font-size: 14px;
        font-weight: bolder;
        width: 640px;
        i {
            border-left: 5px solid @red;
        }
    }
    .brief {
        text-indent: 2em;
        white-space: normal;
    }
    p {
        width: 640px;
        line-height: 25px;
        color: #666;
        font-size: 12px;
        white-space: pre-wrap;
    }
}
</style>